<template>
	<view class="">
		<u-navbar :is-back="false" :border-bottom="false" :background="background">
			<view class="d-flex a-center">
				<view class="pl-2 py-2"  @click="backtrack_img">
					<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
				</view>
				<view class="font-lg font-weight text-white mx-2">编辑客户</view>
				<view class="text-white" @click="dele">删除</view>
			</view>	
		</u-navbar>
		<view class="">
			<view class="m-2 px-3 bg-white rounded-10">
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">姓名</view>
					<view class="">
						<input type="text" v-model="name" @input="name_input" value="" class="text-right" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">昵称</view>
					<view class="d-flex">
						<view class="text-999 mr-1">{{nickname}}</view>
					</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">注册手机号</view>
					<view class="">{{mobile}}</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">联系电话</view>
					<view class="">
						<input type="text" value="" maxlength="11" v-model="phone" class="text-right" placeholder="请输入联系电话" @input="phone_input" />
					</view>
				</view>
				<view class="py-3 d-flex j-sb">
					<view class="font-weight font-35">公司名称</view>
					<view class="flex-1">
						<textarea :auto-height="true" type="text" v-model="company"  class="text-right" @input="company_input" placeholder="请输入公司名称" />
					</view>
				</view>
			</view>
			<view class="m-2 px-3 bg-white rounded-10">
				<view class="py-3 d-flex j-sb border-bottom" @click="quote">
					<view class="font-weight font-35">客户级别</view>
					<view class="d-flex">
						<view class="text-999 mr-1">{{user_item.level_name?user_item.level_name:"请设置"}}</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom" @click="yewushow">
					<view class="font-weight font-35">业务员</view>
					<view class="d-flex">
						<view class="text-999 mr-1">{{yewu_item.name?yewu_item.name:"请设置"}}</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<view class="py-3 d-flex j-sb" @click="client">
					<view class="font-weight font-35">客户标签</view>
					<view class="d-flex flex-1 flex-wrap j-end">
						<view class="text-999 mr-1 flex-1">
							<view class="ml-1 d-flex  flex-wrap j-end" v-for="(item,index) in tally" :key='index'>
								{{item.tag_name||'请设置'}}
							</view>
						</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
			</view>
			
			
			
			
			
			<view class="m-2 px-3 bg-white rounded-10">
				<view class="py-3 d-flex j-sb border-bottom" @click="btnClick">
					<view class="font-weight font-35">所属地区</view>
					<view class="d-flex a-center">
						<view class="mr-2 text-999">{{address_name?address_name:'请设置'}}</view>
						<u-icon name="map-fill" color="#4470f8" size="50"></u-icon>
					</view>
				</view>
				<view class="py-3 d-flex j-sb border-bottom">
					<view class="font-weight font-35">详细地址</view>
					<view class="flex-1">
						<textarea :auto-height="true" type="text" value="" v-model="minute" @input="minute_input" class="text-right" placeholder="请填写详细地址" />
					</view>
				</view>
				<view class="py-3 d-flex j-sb">
					<view class="font-weight font-35">备注</view>
					<view class="flex-1">
						<textarea :auto-height="true" type="text" value="" v-model="remarks" @input="remarks_input" class="text-right" placeholder="请输入备注200个字以内" />
					</view>
				</view>
			</view>
		</view>
		<view class="footer"></view>
		<view class="position-fixed p-2 sub bottom-0 w-100 bg-white py-2">
			<button type="warn" class="rele" @click="sub_next">保存</button>
		</view>
		<!-- 删除 -->
		<u-modal v-model="delete_show" show-cancel-button @confirm="confirm_dele" mask-close-able>
			<view class="m-2 text-center">
				您确定要删除此客户吗？
			</view>
		</u-modal>
		
		<!-- 默认报价 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="user_show">
			<!-- 内容 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999"></view>
					<view class="text-000 font-35">客户级别</view>
					<view class="text-danger" @click="close">
						<u-icon name="close" color="#777" size="35"></u-icon>
					</view>
				</view>
				<!-- 内容 -->
				<view class="ml-2 bg-white">
					<view class="d-flex j-sb a-center p-3 border-bottom" v-for="(item,index) in user_level" :key="index" @click="tab_user(item)">
						<view class="flex-1 w-100">
							{{item.level_name}}
						</view>
						<view class="" v-show="user_item.level_id==item.level_id">
							<u-icon name="checkbox-mark" color="#ff0000" size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</s-popup>
		
		
		<!-- 业务员 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="yewu_show">
			<!-- 内容 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999"></view>
					<view class="text-000 font-35">业务员</view>
					<view class="text-danger" @click="close">
						<u-icon name="close" color="#777" size="35"></u-icon>
					</view>
				</view>
				<!-- 内容 -->
				<view class="ml-2 bg-white">
					<view class="d-flex j-sb a-center p-3 border-bottom" v-for="(item,index) in user_yewu" :key="index" @click="tab_yewu(item)">
						<view class="flex-1 w-100">
							{{item.name}}
						</view>
						<view class="" v-show="yewu_item.id==item.id">
							<u-icon name="checkbox-mark" color="#ff0000" size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</s-popup>
		
		
		<!-- 客户标签 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="tally_show">
			<!-- 内容 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999"></view>
					<view class="text-000 font-35">客户标签</view>
					<view class="text-danger" @click="close">
						<u-icon name="close" color="#777" size="35"></u-icon>
					</view>
				</view>
				<!-- 内容 -->
				<view class="ml-2 bg-white">
					<view class="d-flex j-sb a-cente p-3 border-bottom" v-for="(item,index) in tally" :key="index" @click="tab_tally(item)">
						<view class="flex-1 w-100">
							{{item.tag_name}}
						</view>
						<view class="" v-show="tally_item.tag_id==item.tag_id">
							<u-icon name="checkbox-mark" color="#ff0000" size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</s-popup>
		
		<!-- 地址 -->
		<u-popup v-model="bottomShow" width="100%" height="80%" mode="bottom" border-radius="14" closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
			<view class="">
				<view class="eradders"></view>
				<view class="eradders position-fixed top-0  w-100 bg-white">
					<view class="py-2 border-bottom">
						<view class="font-md d-flex j-center a-center">快速改价</view>
					</view>
					<view class="d-flex address" >
						<view class="py-3 mx-2"  v-if="province_name" @click="province_tab()">
							<view  class="font-weight" >{{province_name}}</view>
						</view>
						<view class="py-3 mx-2"  v-if="city_name" @click="city_tab(items_province)">
							<view class="font-weight">{{city_name}}</view>
						</view>
						<view class="py-3 mx-2"  v-if="county_name" @click="county_tab(items_city)">
							<view class="font-weight">{{county_name}}</view>
						</view>
						<view class="py-3 mx-2" :class="street_show?'active_tab':''" v-if="street_name">
							<view class="font-weight">{{street_name}}</view>
						</view>
						<view class="ml-2 py-3 active_tab" v-if="please">请选择</view>
					</view>
				</view>
				
				<!-- 省 -->
				<view v-show="address_show" class="content_address mx-2 pt-4" v-for="(item,index) in addressList" :key="index" @click="province(item)">
					{{item.name}}
				</view>
				<!-- 市 -->
				<view v-show="province_show" class="content_address mx-2 pt-4" v-for="(item,index) in provinceList" :key="index" @click="city(item)">
					{{item.name}}
				</view>
				<!-- 县区 -->
				<view v-show="city_show" class="content_address mx-2 pt-4" v-for="(item,index) in cityList" :key="index" @click="county(item)">
					{{item.name}}
				</view>
				<!-- 街道 -->
				<view v-show="county_show" class="content_address mx-2 pt-4 d-flex j-sb" v-for="(item,index) in countyList" :key="index" @click="street(item)">
					<view class="" :class="item.id==street_id?'active':''" >
						{{item.name}}
					</view>
					<view class="" v-show="item.id==street_id">
						<u-icon name="checkmark" color="#ff1515" size="33"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default{
		components: {
				sPopup
		},
		data(){
			return {
				background: {
					background: '#fa7226',
				},
				name:"", // 名字
				nickname: "", //昵称
				mobile:"", // 手机号
				phone:"", // 联系电话
				company:"", // 公司名称
				their:"", // 所属地区
				minute:"", // 详细地址
				remarks:"", // 备注
				
				store_user_id:0, // 客户ID
				delete_show:false, // 删除开关
				
				user_show:false, // 开关
				user_level:"", // 默认报价
				user_item:{
					level_id:"",
					level_name:""
				}, // 会员id
				
				
				yewu_show:false, // 开关
				user_yewu:"", // 业务员
				yewu_item:{
					id:"",
					yewu_name:""
				}, // 会员id
				
				
				tally_show:false, // 开关
				tally_item:{
					tag_id:'',
					tag_name:""
				}, // 客户
				tally:"", // 客户标价
				
				bottomShow:false,
				addressTab:"", // 地址tabbar
				addressList:"", // 地址列表
				address_show:false,
				
				province_show:false,
				city_show:false,
				county_show:false,
				
				provinceList:"", // 省的列表
				province_name:"", // 省 的名字
				cityList:"", // 市的列表
				city_name:"" ,// 市的名字
				countyList:"", // 县区的列表
				county_name:"" ,// 县区的名字
				street_name:"", // 街道名字
				street_id:"", // 街道id
				address_name:"", // 地址
				address_default:"", // 默认地址
				
				please:false,
				street_show:false,
				
				items_province:"",
				items_city:"",
				items_county:"",
				items_street:"",
			}
		},
		watch:{
			name(val,oldVal){
				console.log(val,oldVal)
				if(!this.$u.test.chinese(val)){
					this.$u.toast("姓名格式不正确，请修改")
				}
			},
			mobile(val,oldVal){
				if(this.mobile.length==11){
					if(!this.$u.test.mobile(val)){
						this.$u.toast("手机号格式不正确")
					}
				}
			}
		},
		methods:{
			backtrack_img(){
				uni.navigateBack({
					delta:1
				})
			},
			// 删除开关
			dele(){
				this.delete_show=true
			},
			confirm_dele(){
				this.$H.post("v2/store/merchant/user/delete",{
					store_user_id:this.store_user_id
				}).then(res=>{
					if(res.data){
						this.$u.toast("删除成功")
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1000)
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			// 地址弹框
			btnClick() {
			    this.bottomShow=true
			},
			// 姓名
			name_input(e){
				this.name=e.detail.value
			},
			// 手机号
			mobile_input(e){
				this.mobile=e.detail.value
			},
			
			// 联系电话
			phone_input(e){
				this.phone=e.detail.value
			},
			// 公司名称
			company_input(e){
				this.company=e.detail.value
			},
			//  所属地区
			their_input(e){
				this.their=e.detail.value
			},
			// 详细地址
			minute_input(e){
				this.minute=e.detail.value
			}, 
			// 备注
			remarks_input(e){
				this.remarks=e.detail.value
			}, 
			
			// 默认报价
			quote(){
				this.user_show=true
			},
			
			
			yewushow(){
				this.yewu_show=true
			},
			
			tab_user(item){
				this.user_item=item
				this.user_show=false
			},
			
			tab_yewu(item){
				this.yewu_item=item
				this.yewu_show=false
			},
			
			
			// 客户报价
			client(){
				uni.setStorageSync("terrace_item",JSON.stringify(this.tally))
				uni.navigateTo({
					url:'/pagesB/client/edit-tally?user_id='+this.tally.user_id
				})	
			},
			tab_tally(item){
				this.tally_item=item
				this.tally_show=false
			},
			
			// 关闭弹框
			close(){
				this.user_show=false
				this.tally_show=false
			},
			
			// 省
			province(items){
				this.items_province=items
				this.address_show=!this.address_show
				this.province_name=items.name
				
				this.province_show=true
				this.please=true
				console.log(items)
				this.$H.post("v2/store/shop/region",{
					type:2,
					parent_id:items.parent_id,
					}).then(res=>{
						let arr=res.data.regions
						this.provinceList=arr.filter((item,index)=>{
							if(items.id==item.parent_id){
								return item
							}
						})
				})
					
			},
			//  市
			city(items){
				this.items_city=items
				this.city_show=true
				this.province_show=!this.province_show
				this.city_name=items.name
				
				console.log(items)
				this.please=true
				if(this.city_name==this.province_name){
					this.province_name=""
				}else{
					this.$H.post("v2/store/shop/region",{
						type:3,
						parent_id:items.parent_id,
						}).then(res=>{
							let arr=res.data.regions
							this.cityList=arr.filter((item,index)=>{
								if(items.id==item.parent_id){
									return item
								}
						})
					})
				}
			},
			// 县区
			county(items){
				console.log(items)
				this.items_county=items
				this.county_show=true
				this.county_name=items.name
				this.city_show=false
				
				this.please=true
				this.street_show=true
				this.$H.post("v2/store/shop/region",{
					type:4,
					parent_id:items.parent_id,
					}).then(res=>{
						let arr=res.data.regions
						console.log(res)
						this.countyList=arr.filter((item,index)=>{
							if(items.id==item.parent_id){
								return item
							}
						})
				})
				this.address_name=(this.province_name+this.city_name+this.county_name)
			},
			// 街道
			street(items){
				this.items_street=items
				this.street_name=items.name
				
				this.street_id=items.id
				this.please=false
				console.log(items)
				this.bottomShow=false
				this.address_name=(this.province_name+this.city_name+this.county_name+this.street_name)
			},
			// 省 
			province_tab(items){
				this.county_name=""
				this.street_name=""
				this.city_name=""
				
				this.address_show=true
				this.province_show=false
				this.city_show=false
				this.county_show=false
				this.please=true
			},
			// 市
			city_tab(items){
				this.county_name=""
				this.street_name=""
				
				this.street_id=""
				this.county_show=false
				this.city_show=false
				this.province_show=true
				this.please=true
				this.$H.post("v2/store/shop/region",{
					type:2,
					parent_id:items.parent_id,
					}).then(res=>{
						let arr=res.data.regions
						this.provinceList=arr.filter((item,index)=>{
							if(items.id==item.parent_id){
								return item
							}
						})
				})
			},
			// 县区
			county_tab(items){
				this.street_name=""
				
				this.street_id=""
				this.county_show=false
				this.city_show=true
				this.please=true
				
				this.$H.post("v2/store/shop/region",{
					type:3,
					parent_id:items.parent_id,
					}).then(res=>{
						let arr=res.data.regions
						this.cityList=arr.filter((item,index)=>{
							if(items.id==item.parent_id){
								return item
							}
						})
				})
			},
			// 保存
			sub_next(){
				let tag_id=this.tally.map(v=>{
					return v.tag_id
				})
				this.$H.post("v2/store/merchant/user/update",{
					store_user_id:this.store_user_id,
					user_name:this.name,
					// mobile_phone:this.mobile,
					phone: this.phone,
					company_name:this.company,
					level_id:this.user_item.level_id||this.store_detail.level_id,
					yewu_id:this.yewu_item.id||this.store_detail.yewu_id,
					tag_id:tag_id.toString(),
					country_id:this.store_detail.country_id,
					province_id:this.items_province.id||this.store_detail.province_id,
					city_id:this.items_city.id||this.store_detail.city_id,
					district_id:this.items_county.id||this.store_detail.district_id,
					street_id:this.items_street.id||this.store_detail.street_id,
					address:this.minute,
					note:this.remarks
				}).then(res=>{
					if(res.data){
						this.$u.toast("修改成功")
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			}
		},
		onShow() {
			if(getApp().globalData.tally_item){
				this.tally=getApp().globalData.tally_item
				console.log(this.tally)
			}
		},
		onUnload() {
			if(getApp().globalData.tally_item){
				getApp().globalData.tally_item=""
			}
			uni.removeStorageSync("terrace_item")
		},
		onLoad(e) {
			this.store_user_id=e.store_user_id
			
			this.$H.post("v2/store/user/level",{
			}).then(res=>{
				this.user_level=res
			})
			
			this.$H.post("v2/store/user/yewu",{
			}).then(res=>{
				this.user_yewu=res
			})
			
			this.$H.post("v2/store/user/detail",{
				store_user_id:this.store_user_id
			}).then(res=>{
				this.store_detail=res.data
				
				this.tally=res.data.tag_list
				
				this.name=res.data.user_name
				this.nickname = res.data.nickname
				this.mobile=res.data.mobile_phone
				this.phone = res.data.phone
				this.company=res.data.company_name
				this.minute=res.data.address
				this.remarks=res.data.note
				this.user_item.level_name=res.data.level_name
				this.yewu_item.name=res.data.yewu_name
				this.tally_item.tag_name=res.data.tag_name
				this.address_name=res.data.city_name+res.data.district_name
			})
			
			// 地址
			this.$H.post("v2/store/shop/region",{
				device:"",
				client:uni.getStorageSync("client"),
				code:5002,udid:"",
				type:1,parent_id:1,
			}).then(res=>{
				this.address_show=true
				this.please=true
				this.addressList=res.data.regions
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	.sub /deep/ .rele{
		font-size: 30upx;
		padding: 5upx 0;
		background: linear-gradient(to right,#f47814,#f47814);
	}
</style>
